<template>
    <div style="padding: 20px">
        <el-card>
            <el-row type="flex" justify="space-around">
                <el-col :xs="24" :sm="12" :md="8" :lg="8"></el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" v-text="formName" class="formTitle"></el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" style="text-align: right;padding-right: 20px;">
                    <el-button type="primary" v-if="!util.isEmpty(taskId)" plain icon="el-icon-check" size="mini" @click="commitTask()">同意</el-button>
                    <el-button type="warning" v-if="!util.isEmpty(taskId)" plain icon="el-icon-close" size="mini" @click="reject()">驳回</el-button>
                    <el-button type="primary" plain icon="el-icon-check" size="mini" @click="showFlowInfoDialog('1')">流程信息</el-button>
                </el-col>
            </el-row>
            <div style="height:calc(100vh - 240px)">
                <el-scrollbar class="page-scroll" style="height: 100%;">
                    <el-divider content-position="left">表单信息</el-divider>
                    <!--自定义表单-->
                    <form-create v-model="fapi" :rule="rule"  :option="option" style="padding: 0px 57px 0px 40px;"></form-create>
                </el-scrollbar>
            </div>
        </el-card>

        <FlowInfo :businessId="applyForm.id" :billType="'custom_form'" v-if="showFlowInfo" :showStatus="showFlowInfo" @closeFlowInfoDialog="closeFlowInfoDialog"></FlowInfo>

        <ConfirmCommitTask :taskId="taskId" :insId="insId" @closeCommitDialog="closeCommitDialog" :commitType="commitType" :showStatus="showCommitDialog"></ConfirmCommitTask>
    </div>
</template>

<script>
import {getCustomFormByTaskId} from "@/api/oa/customFormTask";
import {commitTask, getHisByInsId} from "@/api/workflow/myTask";
import formCreate from "@form-create/element-ui";
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {getCustomForm} from "@/api/oa/customForm";
import {getMyApply} from "@/api/oa/myApply";
import ConfirmCommitTask from "@/views/workflow/ConfirmCommitTask";

export default {
    name: "CustomFormTask",
    components:{FlowInfo,ConfirmCommitTask},
    data() {
        return {
            taskId:"",
            formName:"",
            readonly:false,
            xml:"",
            fapi: null,
            rule: [],
            option: {},
            applyForm:{
                id: null,
                name: "",
                category: "",
                formKey: "",
                flowKey: "",
                flowName: "",
                flowInsId: "",
                status:"0"
            },
            showFlowInfo:false,
            insId:"",
            haveDoneTask:false,
            showCommitDialog:false,
            commitType:""
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(taskId){
            this.taskId = taskId;
        }
        if(formId){
            this.formId = formId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        this.getCustomForm();
    },
    methods: {
        getCustomForm(){
            // if(this.taskId){
            //     getCustomFormByTaskId(this.taskId).then((res)=>{
            //         if(200==res.code){
            //             if(res.data){
            //                 this.insId = res.data.flowInsId;
            //                 this.applyForm.id = res.data.id;
            //                 this.applyForm.name = res.data.name;
            //                 this.applyForm.category = res.data.category;
            //                 this.applyForm.formKey = res.data.formKey;
            //                 this.applyForm.flowKey = res.data.flowKey;
            //                 this.applyForm.flowInsId = res.data.flowInsId;
            //                 this.applyForm.status = res.data.status;
            //                 let rules = res.data.rules;
            //                 let options = res.data.options;
            //
            //                 if(rules){
            //                     this.rule = formCreate.parseJson(rules);
            //                 }
            //                 if(options){
            //                     this.option = formCreate.parseJson(options);
            //                 }
            //             }
            //         }
            //     })
            // }
            if(this.formId){
                getMyApply(this.formId).then(res=>{
                    if(200==res.code){
                        if(res.data){
                            this.insId = res.data.flowInsId;
                            this.applyForm.id = res.data.id;
                            this.applyForm.name = res.data.name;
                            this.applyForm.category = res.data.category;
                            this.applyForm.formKey = res.data.formKey;
                            this.applyForm.flowKey = res.data.flowKey;
                            this.applyForm.flowInsId = res.data.flowInsId;
                            this.applyForm.status = res.data.status;
                            let rules = res.data.rules;
                            let options = res.data.options;
                            if(rules){
                                this.rule = formCreate.parseJson(rules);
                            }
                            if(options){
                                this.option = formCreate.parseJson(options);
                            }
                        }
                    }
                });
            }

        },
        //根据实例获取流程图片
        showFlowInfoDialog(){
            this.showFlowInfo = true;
        },
        //提交审批
        commitTask(){
            this.commitType = "agree";
            this.showCommitDialog = true;
        },
        //驳回申请
        reject(){
            this.commitType = "reject";
            this.showCommitDialog = true;
        },
        //关闭完成任务弹窗
        closeCommitDialog(){
            this.showCommitDialog = false;
        },
        //关闭流程信息窗口
        closeFlowInfoDialog(){
            this.showFlowInfo = false;
        },
    }
}
</script>

<style  lang="scss"  scoped>
.formTitle{
    text-align: center;
    font-weight: 900;
    color: #606266;
    font-size: 20px;
}
.page-scroll{
    ::v-deep .el-scrollbar__wrap{
        overflow-x: hidden;  /* 隐藏横向的原生滚动条 */
    }
}
</style>
